<template>
    <div class="result">
        <router-link tag="div" to="/" class="intro">
            <div class="img">
                <img src="../assets/img/couponS.png" alt="">
            </div>
            <div class="desc">
                <p class="text">学习就要燃，寒假课拼团！双人拼100元高中班课代金券</p>
                <p class="money">
                    <em>¥</em>0</p>
            </div>
        </router-link>
        <div class="section" v-if="group.status===0">
            <div class="content">
                <div class="head-div">
                    <div class="head-body">
                        <div class="head-img">
                            <img src="../assets/img/Icon_boy.png" alt="">
                            <span>团 长</span>
                        </div>
                        <div>{{group.userList[0].phone}}</div>
                    </div>
                    <div class="head-body">
                        <div class="head-img empty">
                            ?
                        </div>
                        <div>空缺</div>
                    </div>
                </div>
                <div class="rest-time">
                    <div class="line"></div>
                    <div class="text">剩余
                        <span>
                            <em>{{group.hours}}</em>:
                            <em>{{group.minute}}</em>:
                            <em>{{group.second}}</em>
                        </span> 结束
                    </div>
                    <div class="line"></div>
                </div>
                <div class="rest-people">还差
                    <em>1</em>人，快呼唤小伙伴参加</div>
            </div>
            <div class="opt">
                <div v-if="type==='self'">
                    <div class="call" @click="share" v-if="isWeixin">呼叫小伙伴</div>
                    <div class="call link" @click="copy" v-else data-clipboard-target="#foo">呼叫小伙伴
                    </div>
                </div>
                <div v-else>
                    <div class="call" @click="joining">
                        我要参团
                    </div>
                </div>
                <router-link tag="div" to="/" class="back">
                    {{type==='self'?'<<返回主页':'参加其他团>>'}} </router-link>
            </div>
        </div>
        <div class="section " v-else-if="group.status===1||group.status===2">
            <div class="content success">
                <div class="status">
                    <div class="s-img">
                        <img src="../assets/img/icon_yes.png" alt="">
                    </div>
                    <div class="s-text">拼团成功,坐等成团短信通知吧</div>
                </div>
                <div class="head-div">
                    <div class="h-row" v-for="(item,i) in group.userList">
                        <div class="head-body">
                            <div class="head-img">
                                <img v-if="i===0" src="../assets/img/Icon_boy.png" alt="">
                                <img v-else src="../assets/img/Icon_girl.png" alt="">
                                <span v-if="item.type===0">团 长</span>
                            </div>
                            <div>{{item.phone}}</div>
                        </div>
                        <div class="school">
                            <div>意向校区：{{item.schoolName}}</div>
                            <div>校区地址：{{item.address}}{{item.schPhone}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="opt">
                <div class="call" @click="share" v-if="isWeixin">炫耀一下</div>
                <div class="call link" @click="copy" v-else data-clipboard-target="#foo">炫耀一下</div>
                <router-link tag="div" to="/" class="call">
                    返回主页
                </router-link>
            </div>
        </div>
        <div class="section " v-show="false">
            <div class="content fail">
                <div class="status">
                    <div class="s-img">
                        <img src="../assets/img/icon_sorry.png" alt="">
                    </div>
                    <div class="s-text">该团已成团，你也可以 自己当团长，重新开团</div>
                </div>
                <div class="head-div">
                    <div class="head-body">
                        <div class="head-img">
                            <img src="../assets/img/Icon_boy.png" alt="">
                            <span>团 长</span>
                        </div>
                        <div>138****2877</div>
                    </div>
                    <div class="head-body">
                        <div class="head-img">
                            <img src="../assets/img/Icon_boy.png" alt="">
                        </div>
                        <div>138****2877</div>
                    </div>
                </div>
            </div>
            <div class="opt">
                <div class="call" @click="joining">我要重新开团</div>
                <router-link tag="div" to="/" class="back">
                    参加其他团>>
                </router-link>
            </div>
        </div>
        <div class="mask-div" v-show="showMask" @click="showMask=false">
            <div class="mask"></div>
            <img src="../assets/img/share.png" alt="">
        </div>
        <input id="foo" :value="QRcode" class="code-link">
        <v-form ref="form"></v-form>
    </div>
</template>
<script>
import VForm from './Form'
import io from '../lib/io'
import util from '../lib/util'
import conf from '../lib/conf'
import schools from '../assets/school'
import wxConfig from '../assets/wx'
import Clipboard from 'clipboard'
export default {
    name: 'result',
    components: {
        VForm
    },
    data() {
        return {
            type: this.$route.query.type,
            activityGroupId: util.getQueryString('activityGroupId'),
            showMask: false,
            group: { hours: 0, minute: 0, second: 0 },
            QRcode: '',
            isWeixin: util.isWeixin(),
            restInter: '',
            restTime: '',
            shareTitle:'',
            shareText:'',
            shareUrl:''
        }
    },
    created() {
        this.QRcode = conf.basePath + '/#/result?activityGroupId=' + this.activityGroupId
        this.actGroDetById()
    },
    mounted() {
    },
    beforeRouteUpdate(to, from, next){
        document.location.href=conf.basePath + '/#/result?activityGroupId=' + this.activityGroupId+'&type='+to.query.type
        document.location.reload()
        next()
    },
    destroyed() {
        clearInterval(this.restInter)
    },
    methods: {
        async actGroDetById() {
            let { data } = await io.post(io.actGroDetById, { activityGroupId: this.activityGroupId })
            if (data.success) {
                //开团
                if (data.data.status === 0) {
                    this.shareTitle='【双人拼】免费拿100元课程代金券！'
                    this.shareText='我拼了，差你1个就成团！'
                    this.shareUrl=conf.basePath + '/#/result?activityGroupId=' + this.activityGroupId
                    this.restTime = data.data.closeTime - new Date().getTime()
                    data.data = { ...this.dealTime(this.restTime, data.data) }
                    this.group = { ...data.data }
                    this.restInter = setInterval(() => {
                        if (this.restTime < 0) {
                            clearInterval(this.restInter)
                            this.$router.go(0)
                            return
                        }
                        let restTime = this.restTime
                        data.data = { ...this.dealTime(restTime, data.data) }
                        this.restTime = restTime - 1000
                        this.group = { ...data.data }
                    }, 1000)
                }
                //成功的两种情况
                if (data.data.status === 1 || data.data.status === 2) {
                    // if(this.type!=='self'){
                    //     this.$router.push({path:'/',query:{a:'1'}})
                    // }
                    this.shareTitle='我刚刚领了1张代金券，超划算！'
                    this.shareText='分享给你~寒假报课立减100！'
                    this.shareUrl=conf.basePath
                    data.data.userList.map((item, i) => {
                        schools.map((sItem, sI) => {
                            if (sItem.id == item.schoolId) {
                                item.address = sItem.address
                                item.schPhone = sItem.phone
                            }
                        })
                    })
                    //系统匹配成功
                    if ((data.data.status == 1||data.data.status == 2)&&data.data.userList.length<data.data.total) {
                        let school = schools[5]
                        data.data.userList.push({ phone: '135****7031', type: 1, schoolName: school.name, address: school.address, schPhone: school.phone })
                    }
                }
                this.group = data.data
        if (util.isWeixin()) {
            wxConfig()
            this.initWx()
        }
            }
        },
        dealTime(restTime, data) {
            let hours = parseInt(restTime / 3600 / 1000)
            let minute = parseInt((restTime - hours * 3600 * 1000) / 60 / 1000)
            let second = parseInt((restTime - hours * 3600 * 1000 - minute * 60 * 1000) / 1000)
            data.hours = hours
            data.minute = minute
            data.second = second
            return data
        },
        joining() {
            let form=this.$refs.form
            form.changeId(this.activityGroupId)
            form.showOrHide(true)
        },
        share() {
            // document.body.scrollTop=0
            if (util.isWeixin()) {
                this.showMask = true
            } else {
                this.copy()
                console.log('xx')
            }
        },
        copy() {
            var clipboard = new Clipboard('.link');
            clipboard.on('success', function(e) {
                e.clearSelection();
                alert('推荐链接已复制到剪切板，请将该链接发送给他人');
            });
            clipboard.on('error', function(e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        },
        initWx() {
            wx.ready(() => {
                let title =this.shareTitle
                let link = this.shareUrl
                console.log(link)
                wx.onMenuShareTimeline({
                    title: title, // 分享标题  
                    link: link, // 分享链接,将当前登录用户转为puid,以便于发展下线  
                    imgUrl: 'http://h5.game.yuyou100.com/gzgroup01/static/share.png', // 分享图标  
                    success: () => {
                        // 用户确认分享后执行的回调函数 
                        // this.$dialog.alert('分享成功', { okText: '确定' })
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数  
                    }
                });
                wx.onMenuShareAppMessage({
                    title: title, // 分享标题  
                    desc: this.shareText, // 分享描述  
                    link: link, // 分享链接  
                    imgUrl: 'http://h5.game.yuyou100.com/gzgroup01/static/share.png', // 分享图标  
                    type: '', // 分享类型,music、video或link，不填默认为link  
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空  
                    success: () => {
                        // 用户确认分享后执行的回调函数  
                        // this.$dialog.alert('分享成功', { okText: '确定' })
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数  
                    }
                });
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
.result
    background #f5f5f5
    min-height 100%
    padding-bottom .4rem
    box-sizing border-box
    .intro
        padding .38rem .16rem
        display flex
        background #ffffff
        margin-bottom .24rem
        .img
            width 2.24rem
            height 2.24rem
            display flex
            justify-content center
            img
                height 100%
        .desc
            flex 1
            margin-left .14rem
            position relative
            p
                margin 0
                font-size .38rem
                color  #292929
                font-weight bold
            .money
                color #FF2117
                position absolute
                bottom 0
                em
                    font-size .24rem
                    margin-right .04rem
    .section
        .content
            padding .88rem .8rem
            background #ffffff
            &.fail,&.success
                padding .4rem .6rem
                .head-div
                    margin-bottom .46rem !important
                .head-img
                    width .98rem !important
                    height .98rem !important
                    img 
                        width 100% !important
                        height 100% !important
                    span 
                        width .82rem !important 
                        height .32rem !important
                        left .08rem !important
            &.success
                .status
                    margin-bottom .66rem !important
                .head-div
                    flex-direction column !important
                    .h-row
                        display flex
                        margin-bottom .4rem
                        &:last-child
                            margin-bottom 0!important
                        .head-body
                            width 1.36rem 
                            flex none !important
                        .school
                            flex 1
                            font-size .3rem
                            margin-left .4rem
                            padding-top .2rem
                            div:first-child
                                margin-bottom .42rem
            .status
                display flex
                margin-bottom 1.16rem
                .s-img
                    width auto
                .s-text
                    flex 1
                    display flex
                    align-items flex-end
                    font-size .34rem
                    color #666
            .head-div
                display flex
                margin-bottom 1rem
                .head-body
                    flex 1
                    display flex
                    justify-content center
                    align-items center
                    flex-direction column
                    line-height .24rem
                    .head-img
                        margin-bottom .2rem
                        position relative
                        border-radius 50%
                        border 2px solid #F4A418
                        width 1.46rem
                        height 1.46rem
                        img 
                            height 100%
                            width 100%
                        &.empty
                            border 2px dashed #B3B3B3
                            display flex
                            align-items center
                            justify-content center
                            font-size 1.18rem
                            color #B3B3B3
                        span 
                            display flex
                            background #F4A418
                            width 1rem
                            height .38rem
                            border-radius .2rem
                            align-items center
                            justify-content center
                            color #ffffff
                            font-size .24rem
                            position absolute
                            bottom -.1rem
                            left .22rem
        .rest-time
            height .4rem
            width 100%
            padding 10px 
            display flex
            align-items center
            box-sizing border-box
            .line
                flex 1
                height 0
                border-bottom 1px solid #ADADAD
            .text
                margin 0 10px
                font-size .24rem
                color #666666
                span
                    font-size .36rem
                    color #FF2117
                    font-weight bold
                    position relative
                    top .02rem
                    em
                        background #FFD3D1
                        display inline-block
                        width .58rem
                        height .38rem
                        line-height .38rem
                        text-align center
        .rest-people
            margin-top .26rem
            font-size .24rem
            color #292929
            text-align center
            em
                color #FF2117
        .opt
            margin-top .86rem
            text-align center
            .call
                width 3.72rem
                height .8rem
                background #F4A418
                color #ffffff
                font-size .36rem
                font-weight bold
                margin auto
                display flex
                justify-content center
                align-items center
                border-radius .1rem
                margin-bottom .2rem
            .back
                color #666666
                margin-top .32rem
    .mask-div
        position absolute
        left 0
        top 0
        height 100%
        width 100%
        .mask
            position fixed
            background black
            opacity .4
            height 100%
            width 100%
        img 
            position fixed
            z-index 2
            top 0
            right .2rem
    .code-link{
        height:1;
        opacity: 0;
    }
</style>


